import { Button } from 'antd';
import React from 'react';

let count = 1;
export default class List extends React.Component {
    state: any = { list: [{ name: count }] };
    constructor(props: any) {
        super(props);
    }

    handleClick = () => {
        const { list } = this.state;
        if (!Array.isArray(list)) {
            this.setState({
                list: [{ name: count }],
            });
        }

        this.setState({
            list: [...list, { name: ++count }],
        });
    };

    renderList = () => {
        const { list = [] } = this.state;
        if (!Array.isArray(list)) {
            return;
        }
        return (
            <div>
                {list.map((item: any) => {
                    return (
                        <div style={{ height: 300 }} key={item.name}>
                            {item.name}
                        </div>
                    );
                })}
            </div>
        );
    };

    render = () => {
        console.log('render');

        return (
            <>
                <div>{this.renderList()}</div>
                <Button onClick={this.handleClick}>click</Button>
            </>
        );
    };
}
